<template>
    <div class="tast">
        <div class="list">
            <h3>任务列表</h3>
            <div :style="{backgroundColor: item.status==false?'aquamarine':'orange'}" class="tast"
                v-for="(item,index) in $store.state.TastList" :key="index">
                <div>
                    <input type="checkbox" :checked="item.status" @click="change(item)">
                    <span>{{item.id}}</span>
                    <span>{{item.name}}</span>
                </div>
                <span @click="del(index)">删除</span>
            </div>
            <div v-show="$store.state.TastList.length==0" class="empty">
            任务列表为空，请添加一项任务~
        </div>
        </div>
        
    </div>

</template>

<script>
export default {
    methods: {
        change(item) {
            this.$store.commit('change', item);
        },
        del(index) {
            this.$store.commit('del', index);
        }
    }

}
</script>

<style lang="scss" scoped>
.list{
    height: auto;
}
.list h3 {
    margin: 10px 0;
    margin-left: 10px;
}

.tast {
    display: flex;
    height: 40px;
    line-height: 40px;
    margin: 10px;
    background: aquamarine;
    justify-content: space-between;
}

.tast input {
    margin-left: 10px;
}

.tast span {
    
    display: inline-block;
    margin: 0 10px;
}
.empty {
    height: 100px;
    line-height: 100px;
    margin: 10px;
    text-align: center;
}
</style>